<template>
  <div class="anomaly-nodata flex-center flex-column" v-if="!quotaList.length">
    <img src="@/assets/my/icon-nodata.png" alt="">
    <p>暂无数据</p>
  </div>
  <div class="anomaly-list-container" v-else>
    <div v-for="tree in quotaList" :key="tree.name" class="quota-list">
      <div class="list-title flex-center">
        <img :src="nameFilter(tree.name, 'icon')" alt="">
        <p>{{ nameFilter(tree.name, 'division') }}</p>
      </div>
      <div v-for="(industry, ids) in childCate(tree.list,'division')" :key="ids" class="industry-group">
        <div class="second-title flex-center"> {{ industry.name }} </div>

        <div class="child-item-wrap">
          <div class="item-wrap"  v-for="(child,node) in childCate(industry.list,'industryName')" :key="child.name">
            <p class="sub-title">{{child.name}}</p>
            <div class="child-item" v-for="(item,index) in child.list" :key="index">
              <IndexItem :item="item" :index="index" :num="1" @activeItemChange="activeItemChange"></IndexItem>

              <IndexDetail
                v-if="item.isShow"
                class="index-content"
                :index="index"
                :detail="item.detail"
                :quota="item"
                :threshold="item.threshold"
                @Favrefresh="Favrefresh($event, item)"></IndexDetail>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import HomeServe from '@/api/home'
import IndexItem from '@/views/home/components/IndexItem.vue'
import IndexDetail from '@/views/home/components/IndexDetail.vue'

import menus from '@/views/keyIndicator/components/menu.js'

defineOptions({
  name: 'AnomalyList'
})

const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})

const createdInitData = (data: any) => {
  const industryNameList = [
    ...new Set<string>(data.map(item => item.industryKey.split('_')[0]))
  ]
  const ft = industryNameList.reduce((mm: any, division) => {
    const curList = data.filter(item => item.industryKey.split('_')[0] == division)
    mm.push({
      name: division,
      list: curList
    })
    return mm
  }, [])
  return ft
}

const quotaList = ref([])
watch(
  () => props.data,
  (data) => {
    quotaList.value = createdInitData(data)
  }
)

const activeIndex = ref(null)
const activeItemChange = async (item: any,index: number) => {
  item.id = item.quotaId
  if (!item.isShow) {
    const resp = await HomeServe.getRightDetailsByTypeId({
      typeId: item.quotaId
    })
    item.detail = resp.data
  } else {
    item.detail = null
  }
  
  if(activeIndex.value != index){
    quotaList.value.forEach(ele=>{
      ele.list.forEach(ele1=>{
        ele1.isShow = false;
      })
    })
  }
  item.isShow = !item.isShow;
  activeIndex.value = index;
}

const childCate = (list: any,type: string) => {
  let newArr = [];
  list.forEach(item => {
    const parent = newArr.find(c => c.name == item[type])
    if (parent) {
      parent.list.push(item)
    } else {
      const obj = {
        name: item[type],
        list: [item]
      }
      newArr.push(obj)
    }
  })
  return newArr
}


const nameFilter = (name: string, type: string) => {
  let curArr = menus.filter(i=> i.name == name)
  if(curArr)
  return curArr[0][type]
  else
  return ''
}

const Favrefresh = (ev: any, item: any) => {
  item.collectFlag = ev
}
</script>

<style lang="less" scoped>
.anomaly-nodata{
  text-align: center;
  height: calc(100% - 132px);
  img{
    width: 105px;
    height: 91px;
  }
}
.anomaly-list-container {
  .quota-list{
    .list-title{
      margin: 17px 0 10px;
      text-align: center;
      font-weight: bold;
      img{
        width: 20px;
        margin-right: 10px;
      }
    }
    &:first-child{
      .list-title{
        margin: 10px 0 10px;
      }
    }
    .industry-group{
      background: rgba(255, 255, 255, 0.6);
      box-shadow: 1px 1px 10px rgba(0,0,0,0.04);
      border-radius: 8px;
      border: 1px solid #fff;
      padding: 0px 9px 2px;
      position: relative;
      margin-bottom: 15px;
      .second-title{
        padding: 3px 5px;
        position: absolute;
        right: -12.5px;
        top: -8px;
        width: 80px;
        height: 24px;
        background: url(@/assets/keyIndicator/type.png) no-repeat center top;
        background-size: 80px 33px;
        color: white;
        font-size: 12px;
      }
      .child-item{
        margin-bottom: 10px;
      }
    }
  }
}
</style>